<!DOCTYPE html>
<html>	
<head>		
<meta charset="UTF-8">		
<title>摄影社区热门小镇页面</title>		
<style type="text/css">
body{ padding: 0; 	background:white;}
.container{	border: 1px solid red;	width: 500px; overflow: hidden;	border: 1px solid #d0d0d0;	margin: 0px auto;	background: white;}
.top h1{	font-size: 12px;	margin-bottom: 20px;	padding-left: 10px;}
.pic1,.pic2,.pic3,.pic4,.pic5,.pic6{	width: 30%;	overflow: hidden;	float: left;	margin-left: 10px;	margin-bottom: 10px;}
ul{	list-style: none;	float: left;	padding-left: 8px;	margin-top: 0px;		} 
li{	font-size: 9px;	line-height:20px;} 
img{	display: inline-block;	float: left;	border: 1px solid #d0d0d0;	padding: 5px;	border-radius:3px ;	margin-top: 12px;}
a{	text-decoration: none;}
h4{	font-size: 10px;	margin-bottom: 0px;}
a:hover{    text-decoration: underline;}
</style>
</head>	
<body>		
    <div class="container">
    <div class="top">				
       <h1>摄影社区热门小镇</h1>			
    </div>
    <div class="bottom">
    <div class="pic1">
       <img src="../pic/pic_01.jpg" />					
    <ul>						
        <li><h4><a href="#">风景狙击手</a></h4></li>						
        <li>成员：80</li>						
        <li>作品：276</li>					
    </ul>				
    </div>				
    <div class="pic2">					
       <img src="../pic/pic_02.jpg"/>					
        <ul>						
        <li><h4><a href="#">叙事感</a></h4></li>						
        <li>成员：235</li>						
        <li>作品：116</li>					
      </ul>				
    </div>				
    <div class="pic3">					
        <img src="../pic/pic_03.jpg"/>					
        <ul>						
        <li><h4><a href="#">定焦视界</a></h4></li>						
        <li>成员：56</li>						
        <li>作品：456</li>					
      </ul>				
    </div>				
    <div class="pic4">					
        <img src="../pic/pic_04.jpg"/>					
        <ul>						
        <li><h4><a href="#">中画幅乐园</a></h4></li>						
        <li>成员：130</li>						
        <li>作品：239</li>					
      </ul>				
    </div>				
    <div class="pic5">					
        <img src="../pic/pic_05.jpg"/>					
        <ul>						
        <li><h4><a href="#">《卡啪》先锋...</a></h4></li>						
        <li>成员：78</li>						
        <li>作品：125</li>					
      </ul>				
    </div>				
    <div class="pic6">					
        <img src="../pic/pic_06.jpg"/>					
        <ul>						
        <li><h4><a href="#">植物的无声世界</a></h4></li>						
        <li>成员：235</li>						
        <li>作品：1258</li>					
      </ul>				
    </div>							
    </div>		
    </div>	
</body>
</html>
